import { useLocalObservable, useObserver, Observer } from "mobx-react-lite";
import { Row, Col, Space,Button, DatePicker,Radio,Switch,Skeleton,Spin} from "antd";
import {useState,} from 'react'
import { useParams } from 'react-router-dom';

const UserInfo = ()=> {
    //定义组件内的响应式Store, 本地响应式更改方法
    const store = useLocalObservable(()=>({
      name:'xxx',
      changeName(text){
        this.name = text
      }
    }))
    const [alias, setAlias] = useState('小青'); //原始更改方法
    let { name, id } = useParams(); 
    const [current, setCurrent] = useState(1);
    const [switchVal, setSwitchVal] = useState(false);
   
    const setCurrent1 = (e) => {
      setCurrent(e.target.value)
    }

    const onChange = () => {

    }

    // 对比以下两种组件内局部状态视图更新方式。
  return <Observer>
          {() => 
          <>
            <Spin size="small" />
    <Spin />
    <Spin size="large" />
          <Skeleton />
          <Switch defaultChecked onChange={onChange} />
            <Radio.Group onChange={setCurrent1} value={current}>
        <Radio value={1}>A</Radio>
        <Radio value={2}>B</Radio>
        <Radio value={3}>C</Radio>
        <Radio value={4}>D</Radio>
      </Radio.Group>
          <Button type="primary" icon="download" size='large' />
          <DatePicker></DatePicker>
          <Button type="primary" shape="circle" loading />
          <Row justify="space-between">
            <Col></Col>
            <Col span={5} className='border'>
              <Space align='center'>
                <span>当前用户:</span>
                <h2>{store.name}</h2>
                <h2>上个页面传来的值：{name}{id}</h2>
                <h2>{alias}</h2>
                <Button onClick={() => store.changeName('小米')}>修改</Button>
                <Button onClick={() => setAlias('小红')}>修改</Button>
              </Space>
            </Col>
          </Row>
          </>
          }
          
     </Observer>
}
export default UserInfo
